import React, { Component } from 'react'

export default class App extends Component {
  state = {
    name: 'React',
    count: 0,
  }
  constructor() {
    super()
    console.log('constructor')
  }

  /**
   * 16.2 之后的版本生命周期发生更改，此方法不推荐使用了
   * 不想出现警告，修改为UNSAFE_componentWillMount
   */
  componentWillMount() {
    console.log(
      'componentWillMount',
      this.state.name,
      document.querySelector('#name')
    )
    // render 前，最后一次修改状态，不能访问dom
    this.setState({
      name: 'React 1',
    })

    // 初始化数据
  }

  componentDidMount() {
    // render 之后，可以访问dom
    console.log(
      'componentDidMount',
      this.state.name,
      document.querySelector('#name')
    )

    // 数据请求
    // ajax 订阅
    /**
     * 1. ajax
     * 2. 订阅
     * 3. setInterval
     * 4. 基于创建完成dom进行初始化，例如 BetterScroll
     */
  }

  render() {
    console.log('render')
    return (
      <div>
        <h1>App</h1>
        <div id='name'>{this.state.name}</div>

        <div>{this.state.count}</div>
      </div>
    )
  }
}
